<template>
  <div>
    <Headers />
    <div class="layout">
      <div class="left-View">
        <Model1 />
        <Model2 />
        <Model3 />
      </div>
      <div class="center-View">
        <Model7 />
        <Model8 />
      </div>
      <div class="right-View">
        <Model4 />
        <Model5 />
        <!--<Model6 />-->
      </div>
    </div>
  </div>
</template>
<script>
  import Headers from '@/components/header'
  import Model1 from '@/components/province/model1'
  import Model2 from '@/components/province/model2'
  import Model3 from '@/components/province/model3'
  import Model4 from '@/components/province/model4'
  import Model5 from '@/components/province/model5'
  import Model7 from '@/components/province/model7'
  import Model8 from '@/components/province/model8'
  export default {
    components:{
      Headers,
      Model1,
      Model2,
      Model3,
      Model4,
      Model5,
      Model7,
      Model8
    }
  }
</script>
<style scoped lang="scss">

  .layout{
    display: flex;
    margin:1vw 0 0 0;
    padding: 0 .6vw;
    .left-View,.center-View,.right-View{
      flex:1;
    }
    .center-View{
      flex:1.2;
      padding: 0 screenVw(1.2);
    }
  }

</style>
